<template>
  <basic-container>
    <div class="designer-btns">
      <div class="pull-left">
        <ul class="">
          <li>
            <!-- <i class="fa fa-list-alt bg-gray"></i> -->
            <img src="@/assets/img/station-ui/检查.png" alt="" />
            <p>检查</p>
          </li>
        </ul>
      </div>
      <div class="pull-right">
        <div class="split-line"></div>
        <ul>
          <li @click="onReturn()">
            <!-- <i class="fa fa-arrow-left"></i> -->
            <img src="@/assets/img/station-ui/返回.png" alt="" />
            <p>返回</p>
          </li>
          <li>
            <!-- <i class="fa fa-save"></i> -->
            <el-button type="primary" icon="el-icon-document" @click="saveQueryConfigData()">
              <p style="margin-top: 10px">保存</p>
            </el-button>
            <!-- <p>保存</p> -->
          </li>
        </ul>
      </div>
    </div>
    <div class="config-box">
      <p class="config-title"><i class="el-icon-vertical-bar"></i>基础信息</p>
      <div class="config-content">
        <avue-form ref="apiForm" v-model="apiInfo" :option="apiInfoOption"> </avue-form>
      </div>
    </div>
    <div class="config-box">
      <p class="config-title"><i class="el-icon-vertical-bar"></i>参数信息配置</p>
      <div class="config-content">
        <avue-crud :data="paramsData" :option="paramsOption" @row-del="paramsRowDel"></avue-crud>
        <div class="form-btn" @click="openCommonParamsModal()"><i class="el-icon-plus font-icon"></i><span>新增参数</span></div>
      </div>
    </div>
    <el-tabs type="border-card" v-model="tabsIndex" @tab-click="handleTabClick">
      <el-tab-pane label="表设计" name="1">
        <div class="config-box">
          <p class="config-title"><i class="el-icon-vertical-bar"></i>表信息配置</p>
          <div class="config-content">
            <div class="table-title">表信息以及表关联关系</div>
            <avue-crud
              :data="dataTables"
              :option="dataTablesOption"
              @row-click="dataTablesRowClick"
              @row-save="dataTablesRowSave"
              @row-update="dataTablesRowUpdate"
              @row-del="dataTablesRowDel"
            >
              <span slot="tableRelationForm" slot-scope="{ row }">
                <el-input v-if="row.$index != 0" placeholder="请输入内容" v-model="row.tableRelation" readonly>
                  <el-button slot="append" icon="el-icon-search" @click="isTableRelationModal = true"></el-button>
                </el-input>
                <span v-else></span>
              </span>
            </avue-crud>
            <div class="form-btn" @click="openCommonTableModal('add')"><i class="el-icon-plus font-icon"></i><span>新增表关系</span></div>
          </div>
        </div>
        <div class="config-box">
          <p class="config-title"><i class="el-icon-vertical-bar"></i>条件信息配置</p>
          <div class="config-content">
            <avue-crud
              :defaults.sync="conditionsDefaults"
              :data="conditions"
              :option="conditionsOption"
              @row-click="conditionsRowClick"
              @row-save="conditionsRowSave"
              @row-update="conditionsAddUpdate"
              @row-del="conditionsRowDel"
            ></avue-crud>
            <div class="form-btn" @click="openCommonTableFieldModal('conditions', null)"><i class="el-icon-plus font-icon"></i><span>新增条件</span></div>
          </div>
        </div>
        <div class="config-box">
          <p class="config-title"><i class="el-icon-vertical-bar"></i>返回信息配置</p>
          <div class="config-content">
            <avue-form ref="apiForm" v-model="apiInfo" :option="returnTypeOption"> </avue-form>
            <div>
              <div class="table-title">排序配置</div>
              <avue-crud
                :data="sorts"
                :option="sortsOption"
                @row-click="conditionsRowClick"
                @row-save="sortsRowSave"
                @row-update="sortsAddUpdate"
                @row-del="sortsRowDel"
              ></avue-crud>
            </div>
            <div class="form-btn" @click="openCommonTableFieldModal('sorts', null)"><i class="el-icon-plus font-icon"></i><span>新增排序</span></div>

            <template v-if="apiInfo.returnType === '分组'">
              <div class="m--margin-top-5">
                <div class="table-title">分组字段配置</div>
                <avue-crud
                  :data="groupFields"
                  :option="groupFieldsOption"
                  @row-click="conditionsRowClick"
                  @row-save="groupFieldsRowSave"
                  @row-update="groupFieldsAddUpdate"
                  @row-del="groupFieldsRowDel"
                ></avue-crud>
              </div>
              <div class="form-btn" @click="openCommonTableFieldModal('groupFields', null)"><i class="el-icon-plus font-icon"></i><span>添加分组字段</span></div>
            </template>
            <div class="m--margin-top-5">
              <div>
                <div class="table-title" v-if="apiInfo.returnType === '分组'">聚合配置</div>
                <div class="table-title" v-if="apiInfo.returnType === '结果'">返回字段配置</div>
                <avue-crud
                  :defaults.sync="returnFieldsDefaults"
                  :data="returnFields"
                  :option="returnFieldsOption"
                  @row-click="conditionsRowClick"
                  @row-save="returnFieldsRowSave"
                  @row-update="returnFieldsAddUpdate"
                  @row-del="returnFieldsRowDel"
                ></avue-crud>
              </div>
              <div class="form-btn" @click="openCommonTableFieldModal('returnFields', null)"><i class="el-icon-plus font-icon"></i><span>添加字段</span></div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="SQL设计" name="2">
        <div class="config-box">
          <p class="config-title"><i class="el-icon-vertical-bar"></i>SQL信息配置</p>
          <div class="config-content">
            <avue-form ref="apiForm" v-model="apiInfo" :option="configSqlOption"> </avue-form>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <common-modal-template ref="commonModalTemplate" :key="timer" :option="tableOption" @getSelectedRows="getSelectedRows" @newKey="newKey"></common-modal-template>
    <common-data-tables-template
      ref="commonDataTablesTemplate"
      :option="tableOption"
      :dataTables="dataTables"
      @getDataTablesSelectedRows="getDataTablesSelectedRows"
    ></common-data-tables-template>
    <!-- begin::tableRelationModal-->
    <el-dialog append-to-body title="配置表关联关系" :visible.sync="isTableRelationModal" width="80%">
      <avue-crud
        :data="associationConditions"
        :option="associationConditionsOption"
        @row-click="associationConditionsRowClick"
        @row-save="associationConditionsRowSave"
        @row-update="associationConditionsAddUpdate"
        @row-del="associationConditionsRowDel"
      ></avue-crud>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="saveAssociationConditions">保 存</el-button>
        <el-button size="small" icon="el-icon-circle-close" @click="isTableRelationModal = false">取 消</el-button>
      </div>
    </el-dialog>
    <!--end::tableRelationModal -->
  </basic-container>
</template>
<script>
import searchflowConfig from './searchflow-config.js';
export default {
  ...searchflowConfig
};
</script>
<style scoped lang="scss">
@import '@/views/product/model-manage/searchflow-config/searchflow-config.scss';
</style>
